<template>
  <div>
    <div class="search-content">
      <Col class="panel content-header" :span="24">
      <div class="title-bar cf">
        <h5 class="fl">
          <span>
            <a href="javascript:void(0);" class="link" @click="backToLast">
              <i class="fa fa-angle-left" aria-hidden="true"></i>返回上一页</a>
            <span class="dashboard-card-sep">|</span>
            <span class="dashboard-card-name"><span>月功率因数详情</span></span>
          </span>
        </h5>
      </div>
      </Col>
    </div>
    <div>
      <Row>
        <Col span="24" v-if="showTimeRange" style="padding:10px;box-sizing:border-box;">
        <DatePicker :clearable="false" :options="options" v-model="timeDate" type="month" placeholder="请选择查询时间..." style="width: 220px" @on-change="onTimeChange"></DatePicker>
        </Col>
        <!-- 折线图 -->
        <Col span="24" class="panel map-panel" style="margin-bottom:15px;">
        <div style="width:100%;height:350px;" class="blank-chart">
          <div ref="chartRef" style="width: 100%;height: 100%;"></div>
        </div>
        </Col>
        <!-- 表格 -->
        <Col class="panel table-panel" :span="24" style="overflow-x: auto;margin-bottom: 20px;">
        <AnalTable :tableData="tableData" :tableStyle="{ width:'100%' }"></AnalTable>
        </Col>
      </Row>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex"
import AnalTable from "../AnalTable"
import mixin from "./mixin"
import { getYinShu } from "@/api"
export default {
  mixins: [mixin],
  components: { AnalTable },
  computed: { ...mapGetters(["color"]) },
  mounted() {
    this.initData()
  },
  data() {
    return {
      echartInstence: null,
      showTimeRange: true,
      tableData: []
    }
  },
  methods: {
    onTimeChange() {
      this.initData()
    },
    initData() {
      const vm = this,
        { id, name } = vm.$route.params,
        date = vm.moment(vm.timeDate).format("YYYY-MM"),
        moment = vm.moment,
        params = {
          date,
          deviceNo: id
        }
      if (vm.echartInstence) {
        vm.echartInstence.clear()
      }
      vm.echartInstence = vm.echarts.init(vm.$refs.chartRef)
      vm.echartInstence.showLoading({ text: "", color: "red" })
      getYinShu(params).then(res => {
        if (res.code === 200 && res.data) {
          this.printMap(res.data.list, date, name)
          const info = res.data.info
          try {
            vm.tableData = [
              {
                key: "A相最高功率因数",
                value: `${info["A"].maxValue}(${moment(
                  info["A"].maxValueDate
                ).format("YYYY-MM-DD HH:mm:ss")})`
              },
              {
                key: "A相最低功率因数",
                value: `${info["A"].minValue}(${moment(
                  info["A"].minValueDate
                ).format("YYYY-MM-DD HH:mm:ss")})`
              },
              {
                key: "B相最高功率因数",
                value: `${info["B"].maxValue} (${moment(
                  info["B"].maxValueDate
                ).format("YYYY-MM-DD HH:mm:ss")})`
              },
              {
                key: "B相最低功率因数",
                value: `${info["B"].minValue} (${moment(
                  info["B"].minValueDate
                ).format("YYYY-MM-DD HH:mm:ss")})`
              },
              {
                key: "C相最高功率因数",
                value: `${info["C"].maxValue} (${moment(
                  info["C"].maxValueDate
                ).format("YYYY-MM-DD HH:mm:ss")})`
              },
              {
                key: "C相最低功率因数",
                value: `${info["C"].minValue} (${moment(
                  info["C"].minValueDate
                ).format("YYYY-MM-DD HH:mm:ss")})`
              },
              {
                key: "总最高功率因数",
                value: `${info["Z"].maxValue} (${moment(
                  info["Z"].maxValueDate
                ).format("YYYY-MM-DD HH:mm:ss")})`
              },
              {
                key: "总最低功率因数",
                value: `${info["Z"].minValue} (${moment(
                  info["Z"].minValueDate
                ).format("YYYY-MM-DD HH:mm:ss")})`
              }
            ]
          } catch (e) {
            return false
          }
        } else {
          vm.echartInstence.setOption({
            title: {
              text: "暂无数据",
              textStyle: {
                fontSize: 28,
                fontWeight: "normal"
              },
              left: "center",
              top: "center"
            }
          })
          vm.echartInstence.hideLoading()
          vm.tableData = [
            {
              key: "A相最高功率因数",
              value: `-`
            },
            {
              key: "A相最低功率因数",
              value: `-`
            },
            {
              key: "B相最高功率因数",
              value: `-`
            },
            {
              key: "B相最低功率因数",
              value: `-`
            },
            {
              key: "C相最高功率因数",
              value: `-`
            },
            {
              key: "C相最低功率因数",
              value: `-`
            },
            {
              key: "总最高功率因数",
              value: `-`
            },
            {
              key: "总最低功率因数",
              value: `-`
            }
          ]
        }
      })
    },

    printMap(dataArray = [], date, name) {
      const vm = this

      let xRay = dataArray[20].map(item => {
        return item.id
      })
      let Amax = dataArray[20].map(item => {
        return item.maxValue
      })
      let Amin = dataArray[20].map(item => {
        return item.minValue
      })

      let Bmax = dataArray[21].map(item => {
        return item.maxValue
      })
      let Bmin = dataArray[21].map(item => {
        return item.minValue
      })

      let Cmax = dataArray[22].map(item => {
        return item.maxValue
      })
      let Cmin = dataArray[22].map(item => {
        return item.minValue
      })

      let Zmax = dataArray[23].map(item => {
        return item.maxValue
      })
      let Zmin = dataArray[23].map(item => {
        return item.minValue
      })

      let option = {
        color: vm.color,
        title: {
          text: name,
          left: "center",
          subtext: date
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985"
            }
          }
        },
        legend: {
          bottom: 0
        },
        grid: {
          top: "20%",
          left: "3%",
          right: "4%",
          bottom: "60",
          containLabel: true
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xRay
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "A相最大功率因数",
            type: "line",
            data: Amax
          },
          {
            name: "A相最小功率因数",
            type: "line",
            data: Amin
          },
          {
            name: "B相最大功率因数",
            type: "line",
            data: Bmax
          },
          {
            name: "B相最小功率因数",
            type: "line",
            data: Bmin
          },
          {
            name: "C相最大功率因数",
            type: "line",
            data: Cmax
          },
          {
            name: "C相最小功率因数",
            type: "line",
            data: Cmin
          },
          {
            name: "总功率因数最大值",
            type: "line",
            data: Zmax
          },
          {
            name: "总功率因数最小值",
            type: "line",
            data: Zmin
          }
        ]
      }

      vm.echartInstence.setOption(option)
      vm.echartInstence.hideLoading()
    },

    backToLast() {
      this.$router.go(-1)
    }
  }
}
</script>
